<template>
    <div>
        <div class="top">
            <div class="top-left fl">
                <img src="../../assets//images/people.png" alt="">
            </div>
            <div class="top-right fl">
                <div class="name">{{nameAndAge.xm}}</div>
                <div class="sex">
                    <span>性别：{{nameAndAge.xb}}</span>
                    出生日期：{{nameAndAge.birthday}}
                </div>
            </div>
        </div>
        <div class="main" v-for="(item,index) in jcReportData" :key="index">
            <div class="detail"  >
                <div class="title">{{hosName}}</div>
                <div class="text"><span>报告时间</span>{{item.bgsj}}</div>
                <div class="text">
                    <p class="fl"><span>影像号</span>{{item.yxh}}</p>
                    <p class="fr"><span>检查科室</span>{{item.sqks}}</p>
                </div>
                <div class="text">
                    <p class="fl" v-if="item.mzzybz === '2'"><span>住院号</span>{{item.jzlsh}}</p>
                    <p class="fr"  v-if="item.mzzybz === '1'"><span>门诊号</span>{{item.jzlsh}}</p>
                </div>
            </div>
            <div class="induction" v-show="item.bt01!=' '">
                <div class="title">{{item.bt01}}</div>
                <div class="text">
                    {{item.nr01}}
                </div>
            </div>
            <div class="content"  v-show="item.bt02!=' '">
                <div class="title">
                    <span></span>{{item.bt02}}
                </div>
                <div class="text">
                    {{item.nr02}}
                </div>
            </div>
            <div class="content"  v-show="item.bt03!=' '">
                <div class="title">
                    <span></span>{{item.bt03}}
                </div>
                <div class="text">
                    {{item.nr03}}
                </div>
            </div>
            <div class="content"  v-show="item.bt04!=' '">
                <div class="title">
                    <span></span>{{item.bt04}}
                </div>
                <div class="text">
                    {{item.nr04}}
                </div>
            </div>
            <div class="content"  v-show="item.bt05!=' '">
                <div class="title">
                    <span></span>{{item.bt05}}
                </div>
                <div class="text">
                    {{item.nr05}}
                </div>
            </div>
            <div class="content"  v-show="item.bt06!=' '">
                <div class="title">
                    <span></span>{{item.bt06}}
                </div>
                <div class="text">
                    {{item.nr06}}
                </div>
            </div>
            <div class="content"  v-show="item.bt07!=' '">
                <div class="title">
                    <span></span>{{item.bt07}}
                </div>
                <div class="text">
                    {{item.nr07}}
                </div>
            </div>
            <div class="content"  v-show="item.bt08!=' '">
                <div class="title">
                    <span></span>{{item.bt08}}
                </div>
                <div class="text">
                    {{item.nr08}}
                </div>
            </div>
            <div class="content" v-show="item.bt09!=' '">
                <div class="title">
                    <span></span>{{item.bt09}}
                </div>
                <div class="text">
                    {{item.nr09}}
                </div>
            </div>
            <div class="content"  v-show="item.bt10!=' '">
                <div class="title">
                    <span></span>{{item.bt10}}
                </div>
                <div class="text">
                    {{item.nr10}}
                </div>
            </div>
            <div class="content" v-show="item.bt11!=' '">
                <div class="title">
                    <span></span>{{item.bt11}}
                </div>
                <div class="text">
                    {{item.nr11}}
                </div>
            </div>
            <div class="content"  v-show="item.bt12!=' '">
                <div class="title">
                    <span></span>{{item.bt12}}
                </div>
                <div class="text">
                    {{item.nr12}}
                </div>
            </div>
            <div class="content" v-show="item.bt13!=' '">
                <div class="title">
                    <span></span>{{item.bt13}}
                </div>
                <div class="text">
                    {{item.nr13}}
                </div>
            </div>
            <div class="content" v-show="item.bt14!=' '">
                <div class="title">
                    <span></span>{{item.bt14}}
                </div>
                <div class="text">
                    {{item.nr14}}
                </div>
            </div>
            <div class="content" v-show="item.bt15!=' '">
                <div class="title">
                    <span></span>{{item.bt15}}
                </div>
                <div class="text">
                    {{item.nr15}}
                </div>
            </div>

            <!-- 超声 -->
            <!-- <div class="content">
                <div class="title"><span></span>超声描述</div>
                <div class="text">右侧胸腔可见无回声区，最大径约50mm，左侧胸腔未见明显无回声区，因气体遮盖，纵隔显示不清晰。/5、颈6/7椎间隙略狭窄。项韧带未见明显异常。齿突无左右偏斜。</div>
            </div> -->
            <!-- <router-link :to="{path:'/jcbg/compare',query:{}}">同上期比较</router-link> -->
        </div>
        <!-- 数据仅供参考提示，hosName通过接口获得，在该组件赋值传给子组件，首页不需要传值，默认为空 -->
        <tips :hosName="hosName"></tips>
        <!-- 水印 -->
        <div class="watermark"></div>
    </div>
</template>

<script>
import tips from '@/components/tips.vue'
import { getRISReportByStudyUidApi} from '@/api/healthRecords'
export default {
  name: 'JCDETAIL',
  data () {
    return {
        jcbgxxParam:{
            "yljgdm":"",
            "jzlsh":""
        },//42502657201/1002567736
        jcReportData: [],
      msg: 'Welcome to Your Vue.js App',
        hosName:JSON.parse(localStorage.getItem('mzjbxx')).yymc,//医院名称
        nameAndAge:JSON.parse(localStorage.getItem('jbxx')),
        list:JSON.parse(localStorage.getItem('mzjbxx')),
    }
  },
    methods:{
        init() {
            this.jcbgxxParam.yljgdm = JSON.parse(localStorage.getItem('mzjbxx')).yljgdm;
            this.jcbgxxParam.studyuid = JSON.parse(localStorage.getItem('mzjbxx')).studyuid;
        },
        // 1.6.2检查报告查询
        getRISReportByStudyUid() {
            getRISReportByStudyUidApi(JSON.stringify(this.jcbgxxParam)).then(response => {
                if (response.data.code == 1) {
                    this.jcReportData = response.data.data
                }
            })
        }
        // // 1.2.5 门诊检查报告信息
        // getRISReport() {
        //     getRISReportApi(JSON.stringify(this.jcbgxxParam)).then(response => {
        //         if (response.data.code == 1) {
        //             this.jcReportData = response.data.data
        //         }
        //     })
        // },
        //
        // // 1.2.5 住院检查报告信息g
        // getZYRISReport() {
        //     getZYRISReportApi(JSON.stringify(this.jcbgxxParam)).then(response => {
        //         if (response.data.code == 1) {
        //             this.jcReportData = response.data.data
        //         }
        //     })
        // }
    },
  components:{
      tips
  },
    created() {
        this.init();
        this.getRISReportByStudyUid();
      // if(this.list.mzzybz=="1"){
      //     this.getRISReport()
      // }else {
      //     this.getZYRISReport()
      // }

    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.fl{
    float: left;
}
.fr{
    float: right;
}
.top{
    overflow: hidden;
    zoom:1;
    background: #fff;
    padding: 0.6rem 1rem;
    .top-left{
        width: 2.5rem;
        height:2.5rem;
        overflow: hidden;
        border-radius: 50%;
        margin-right: 1rem;
        img{
            width: 100%;
        }
    }
    .top-right{
        width: 18rem;
        font-size: 1rem;
        color:#666;
        .name{
            color: #333;
            font-size: 1.3rem;
        }
        span{
            margin-right:1rem;
        }
    }
}
.main{
    background: #fff;
    padding: 1rem;
    margin-top:1rem;
    .detail{
        .title{
            font-size: 1.2rem;
            color:#333;
            margin-bottom: 1rem;
        }
        .text{
            font-size: 1rem;
            color:#666;
            overflow: hidden;
            margin-bottom: 0.5rem;
            span{
                display: inline-block;
                width: 4rem;
                text-align: justify;
                color:#999;
                margin-right: 1rem;
            }
            p{
                width: 50%;
            }
        }
    }
    .induction{
        margin-top:1rem;
        background: #EEF9FD;
        border:dashed #0CB7F5 1px;
        border-radius: 1rem;
        padding:1rem;
        .title{
            color:#009CDF;
            font-size:1.3rem;
            margin-bottom:0.5rem;
        }
        .text{
            font-size:1rem;
            color:#333;

        }
    }
    .content{
        margin-top:1rem;
        border-bottom:#ddd dashed 1px;
        padding-bottom:1rem;
        .title{
            color:#009CDF;
            font-size: 1.3rem;
            // line-height: 2rem;
            span{
                display: inline-block;
                width: 0.3rem;
                height:1.2rem;
                background: linear-gradient(0deg,rgba(47,152,240,1),rgba(99,217,245,1));
                margin-right: 0.5rem;
                vertical-align: middle;
                margin-bottom:0.2rem;
            }
            
        }
        .text{
            margin-top:1rem;
            font-size: 1rem;
            color:#333;
            line-height: 2rem;
        }
    }
    .content:last-child{
        border:none;
    }
}
</style>
